<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                    <title>二手车</title>
                    <link rel="stylesheet" href="../css/vant.css">
                        <script src="../js/axios.min.js"></script>
                        <script src="../js/vue.js"></script>
                        <script src="../js/common.js"></script>
                        <script src="../js/vant.min.js"></script>
                        <style>
                            .nav {
                                
                            }
                            .type {
                                text-align: center;
                                margin: auto;
                                line-height: 30px;
                                height: 30px;
                                background: #ff0000;
                            }
                        </style>
                    </head>
    
    <body>
        <div id="app">
            <div>
                <van-nav-bar title="标题" left-text="" right-text="按钮" left-arrow></van-nav-bar>
            </div>
            <ul style="display: flex;">
                <li class="type" v-for="type in types" v-on:click="greet(type.name)">{{type.name}}</li>
            </ul>
            <ul style="display: flex">
                <li class="type" v-for="brand in brands" v-on:click="greet(brand.name)">{{brand.name}}</li>
            </ul>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    types: [{name:'xx'}, {name:'xx'}, {name:'xx'}, {name:'xx'}],
                    moneys: [{name:'xx'}, {name:'xx'}, {name:'xx'}, {name:'xx'}],
                    brands: [{name:'tt'}, {name:'tt'}, {name:'tt'}, {name:'tt'}],
                    isScreenDataGet: false,
                    screenData: {},
                    lists: [],
                    listData: {},
                    page: 1,
                    ids: '',
                    isLook: ''
                },
                mounted() {
                    if (this.isScreenDataGet = false) {
                        this.common.httpRequest(this, {
                            url: '/car/saleCarHome',
                            param: {},
                            reciver: 'screenData'
                        });
                    }
                    this.common.httpRequest(this, {
                        url: '/car/saleCarList',
                        param: {
                            page: this.page,
                            ids: this.ids, 
                            is_look: this.isLook
                        },
                        reciver: 'listData'
                    });
                },
                methods: {
                    fetchData: function(e) {
                        this.common.print(e);
                        if (e.url == '/car/saleCarHome') {
                            this.isScreenDataGet = true
                            this.types = e.data.car_type;
                            this.moneys = e.data.car_money;
                            this.brands = e.data.car_brand;
                        } else if (e.url == '/car/saleCar') {
                            //this.listData = val;
                        }
                    },
                    type: function(e) {
                        
                    },
                    money: function(e) {
                        
                    },
                    brand: function(e) {
                        
                    },
                    goLicheng: function(e) {
                        //this.common.pushHtml('licheng');
                    },
                    
                },
                watch: {
                    screenData: {
                        handler: function(val, oldval) {
                            this.fetchData(val);
                        }
                    },
                    listData: {
                        handler: function(val, oldval) {
                            this.fetchData(val);
                        }
                    }
                }
            })
        </script>
    </body>
    
</html>

